import { Card } from 'antd-mobile';
import React, { useState, useEffect } from'react';
import { useNavigate } from'react-router-dom';

function MapComponent() {
    const navigate = useNavigate();
    const [selectedStore, setSelectedStore] = useState(null);

    useEffect(() => {
        var map = new BMap.Map("bmap");
        map.centerAndZoom("shanghai", 400);

        var point = new BMap.Point(116.404, 39.915);
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);

    }, []);

    const stores = [
        {
            name: 'OMINI来福士广场店',
            distance: '10分钟 0.8km',
            address: '上海市来福士广场1层32号',
            status: '有货',
            image: 'https://img1.baidu.com/it/u=832578763,2477360460&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'
        },
        {
            name: 'OMINI来福士广场店',
            distance: '10分钟 0.8km',
            address: '上海市来福士广场1层32号',
            status: '补货中',
            image: 'https://img1.baidu.com/it/u=832578763,2477360460&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'
        },
        {
            name: 'OMINI来福士广场店',
            distance: '10分钟 0.8km',
            address: '上海市来福士广场1层32号',
            status: '有货',
            image: 'https://img1.baidu.com/it/u=832578763,2477360460&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'
        }
    ];

    return (
        <div>
            <div style={{ height: '300px', backgroundColor: 'lightblue' }}>
                <div>
                    <div id="bmap" style={{ height: "300px" }}></div>
                </div>
            </div>
            <div>
                <h3>附近共 {stores.length} 家门店</h3>
                {stores.map((store, index) => (
                    <Card key={index} style={{ border: '1px solid #ccc', padding: '10px', margin: '10px 0' }}>
                        <img src={store.image} alt={store.name} style={{ width: '100px', height: '100px' }} />
                        <Card>
                            <p>{store.name}</p>
                            <p>{store.distance}</p>
                            <p>{store.address}</p>
                            {store.status === '有货' && <p style={{ color:'red' }}>{store.status}</p>}
                            {store.status === '补货中' && <p style={{ color: 'gray' }}>{store.status}</p>}
                        </Card>
                        <Card>
                            <button
                                onClick={() => {
                                    setSelectedStore(store);
                                    navigate(-1);
                                }}
                                style={{
                                    backgroundColor: selectedStore === store? 'lightblue' : 'white',
                                    border: '1px solid lightblue',
                                    padding: '5px 10px',
                                    borderRadius: '5px',
                                }}
                            >
                                {selectedStore === store? '已选择' : '选择'}
                            </button>
                        </Card>
                    </Card>
                ))}
                <p>更多门店拓展中~</p>
            </div>
        </div>
    );
}

export default MapComponent;